<template>
  <div class="surrender-records-container">
    <h2 class="page-title">送养记录</h2>
    <div class="records-content">
      <div class="records-grid">
        <el-card v-for="record in surrenderRecords" :key="record.id" class="record-card">
          <div class="pet-header">
            <el-image :src="`/api/Petfile/${record.pet_image}`" class="pet-image" fit="cover" />
            <div class="pet-basic-info">
              <h3>{{ record.pet_name }}</h3>
              <el-tag :type="getStatusType(record.status)" size="small" >
                {{ getStatusText(record.status) }}
              </el-tag>
            </div>
          </div>
          
          <div class="pet-info-list">
            <div class="info-item">
              <span class="label">类型：</span>
              <span>{{ record.petTypeName }}</span>
            </div>
            <div class="info-item">
              <span class="label">性别：</span>
              <span>{{ record.pet_gender === 'male' ? '公' : '母' }}</span>
            </div>
            <div class="info-item">
              <span class="label">年龄：</span>
              <span>{{ record.pet_age }}岁</span>
            </div>
            <div class="info-item">
              <span class="label">申请时间：</span>
              <span>{{ new Date(record.created_at).toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit'
              }) }}</span>
            </div>
          </div>

          <div class="card-footer">
            <el-button type="primary" @click="showDetails(record)">查看详情</el-button>
          </div>
        </el-card>
      </div>

      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[8, 16, 24, 32]"
          layout="total, sizes, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 详情对话框 -->
    <el-dialog
      v-model="dialogVisible"
      title="送养详细信息"
      width="60%"
      :before-close="handleClose"
    >
      <div v-if="selectedRecord" class="detail-content">
        <div class="detail-header">
          <el-image :src="`/api/Petfile/${selectedRecord.pet_image}`" class="detail-image" fit="cover" />
          <div class="detail-basic">
            <h2>{{ selectedRecord.pet_name }}</h2>
            <el-tag :type="getStatusType(selectedRecord.status)">
              {{ getStatusText(selectedRecord.status) }}
            </el-tag>
          </div>
        </div>

        <el-descriptions :column="2" border>
          <el-descriptions-item label="宠物类型">{{ selectedRecord.petTypeName }}</el-descriptions-item>
          <el-descriptions-item label="性别">
            {{ selectedRecord.pet_gender === 'male' ? '公' : '母' }}
          </el-descriptions-item>
          <el-descriptions-item label="年龄">{{ selectedRecord.pet_age }}岁</el-descriptions-item>
          <el-descriptions-item label="是否绝育">
            {{ selectedRecord.is_sterilized ? '是' : '否' }}
          </el-descriptions-item>
          <el-descriptions-item label="是否接种">
            {{ selectedRecord.is_vaccinated ? '是' : '否' }}
          </el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ selectedRecord.contact_phone }}</el-descriptions-item>
          <el-descriptions-item label="联系地址" :span="2">{{ selectedRecord.contact_address }}</el-descriptions-item>
          <el-descriptions-item label="健康状况" :span="2">{{ selectedRecord.health_status }}</el-descriptions-item>
          <el-descriptions-item label="送养原因" :span="2">{{ selectedRecord.surrender_reason }}</el-descriptions-item>
          <el-descriptions-item label="宠物描述" :span="2">{{ selectedRecord.pet_description }}</el-descriptions-item>
          <el-descriptions-item label="申请时间">{{ new Date(selectedRecord.created_at).toLocaleString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit'
          }) }}</el-descriptions-item>
          <el-descriptions-item label="更新时间">{{ new Date(selectedRecord.updated_at).toLocaleString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit'
          }) }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import request from '@/utils/request'
import { ElMessage } from 'element-plus'

const surrenderRecords = ref([])
const currentPage = ref(1)
const pageSize = ref(8)
const total = ref(0)
const dialogVisible = ref(false)
const selectedRecord = ref(null)

const getStatusType = (status) => {
  const statusMap = {
    'pending': 'warning',
    'approved': 'success',
    'rejected': 'danger'
  }
  return statusMap[status] || 'info'
}

const getStatusText = (status) => {
  const statusMap = {
    'pending': '待审核',
    'approved': '已通过',
    'rejected': '已拒绝'
  }
  return statusMap[status] || status
}

const fetchRecords = async () => {
  try {
    const userInfo = JSON.parse(localStorage.getItem('userInfo'))
    const res = await request.get('/petSurrender/search', {
      params: {
        pageSize: pageSize.value,
        pageNum: currentPage.value,
        userId: userInfo.id
      }
    })
    
    if (res.code === 200) {
      surrenderRecords.value = res.data.list
      total.value = res.data.total
    } else {
      ElMessage.error(res.msg || '获取送养记录失败')
    }
  } catch (error) {
    console.error('获取送养记录失败:', error)
    ElMessage.error('获取送养记录失败')
  }
}

const handleSizeChange = (val) => {
  pageSize.value = val
  fetchRecords()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  fetchRecords()
}

const showDetails = (record) => {
  selectedRecord.value = record
  dialogVisible.value = true
}

const handleClose = () => {
  dialogVisible.value = false
  selectedRecord.value = null
}

onMounted(() => {
  fetchRecords()
})
</script>

<style scoped>
.surrender-records-container {
  padding: 20px 0;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 30px;
  color: #303133;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 15px;
}

.records-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.record-card {
  transition: all 0.3s ease;
}

.record-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.pet-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.pet-image {
  width: 80px;
  height: 80px;
  border-radius: 8px;
}

.pet-basic-info {
  display: flex;
  flex-direction: column;
  flex: 1;
   align-items: flex-start;  /* 添加此行，使内容左对齐 */
}

.pet-basic-info h3 {
  text-align: left;
  margin: 0 0 10px 0;
  font-size: 18px;
}

.pet-info-list {
  margin: 15px 0;
}

.info-item {
  margin-bottom: 8px;
  font-size: 14px;
}

.label {
  color: #909399;
  margin-right: 5px;
}

.card-footer {
  margin-top: 15px;
  text-align: right;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.detail-content {
  padding: 20px;
}

.detail-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}

.detail-image {
  width: 120px;
  height: 120px;
  border-radius: 10px;
}

.detail-basic h2 {
  margin: 0 0 15px 0;
}

</style>